<template>
	<div>
		<!-- 标题 -->
		<div class="title">
			<div class="back" @click="back">
				<img style="width: 28px; height: 28px" src="../assets/images/back.png" />
				<span style="font-size: 16px">返回</span>
			</div>
			<div class="info">
				<span>宣传 信息</span>
			</div>
			<div>
				<img style="margin-top: 5px" src="../assets/images/message.png" />
			</div>
		</div>
		<!-- 内容 -->
		<div class="content">
			<div class="top">
				<div class="left">
					<img
						style="width: 50px; height: 50px; margin-right: 10px"
						:src="item.headimgurl"
					/>
					<div>
						<span class="name">{{item.contacts}}</span>
						<div>
							<span class="tag topping" v-show="item.stTop==1?true:false">置顶</span>
							<span class="tag">{{getTypes(item.type)}}</span>
							<span style="color: #999; font-size: 13px">{{getTime(item.createTime)}}</span>
						</div>
					</div>
				</div>
				<div class="right">
					<img
						class="ewm"
						src="http://xj.dooop.top/upload/haibao/fenlei/info_2149_0_0_4187_20220211.jpg"
					/>
					<div>
						<span class="t">长按二维码</span>
						<span class="t">收藏该信息</span>
					</div>
				</div>
			</div>
			<div class="line"></div>
			<div class="bottom">
				<p class="txt">{{item.description}}</p>
				<ol class="pic">
					<li>
						<img
							src="https://image.chwlsq.com/4187/info/11522300_2202070924567854911.jpg?x-oss-process=image/resize,w_1000,m_lfit"
						/>
					</li>
				</ol>
				<div class="ldk">
					<div class="item">
						<img
							style="width: 16px; height: 16px"
							src="http://xj.dooop.top/themes/info/images/liulan.png"
						/>
						<i class="yanse">{{item.viewCount}}</i>人浏览
					</div>
					<div class="item">
						<img
							style="width: 16px; height: 16px"
							src="http://xj.dooop.top/themes/info/images/zan1.png"
						/>
						<i class="yanse">166</i>人点赞
					</div>
					<div class="item">
						<img
							style="width: 16px; height: 16px"
							src="http://xj.dooop.top/themes/info/images/zhuan.png"
						/>
						<i class="yanse">{{item.shareCount}}</i>人扩散
					</div>
				</div>
				<ul class="zanList">
					<li>
						<img
							class="zanHeader"
							src="http://img.chwlsq.com/4187/logo/f98aeqTEmox5mbicMibKlglrTYuZHf2ico7IibuhBmhfS0icg15pD9uwtUArib2yHic3cdIpdG95cicfrmqFAic091tWZvQ.gif"
						/>
					</li>
					<li>
						<img
							class="zanHeader"
							src="http://img.chwlsq.com/4187/logo/JXFcmlFS68iaWJLDUGXwzOJiaoez1ekdUeqicqpGIFxA8GHicAO1V02B4QTF9LnKvAib49W7HwRRyCiaD2MJk6baYibLx2KlRGjuqsj.gif"
						/>
					</li>
				</ul>
				<div style="height:10px; background:#f2f2f2; margin-top:5px"></div>
				<div class="telInfo">
					<p>联系方式：点击右侧直接拨打电话号码</p>
					<div class="right">
						<a>
							<span class="tel">
								<img src="http://xj.dooop.top/themes/info/images/phonegb.gif" />
								<span style="color:#fff">拨打电话</span>
							</span>
						</a>
					</div>
				</div>
				<div
					style="background:#f2f2f2; height:1px; margin-left:10px; margin-right:10px"
				></div>
				<p class="gsd">号码归属地-石家庄-电信</p>
				<div
					style="background:#f2f2f2; height:1px; margin-left:10px; margin-right:10px"
				></div>
				<div class="guanggao">
					<img
						class="pic"
						src="https://image.chwlsq.com/779/content/2004101111028864388.gif"
					/>
					<img
						class="pic"
						src="https://image.chwlsq.com/779/content/2004131106159563615.gif"
					/>
				</div>
				<div style="height:10px; background:#f2f2f2; margin-top:5px"></div>
				<div class="jubao">
					<div>
						<p style="font-size:16px; color:#333">如遇无效、虚假、诈骗信息，请立即举报</p>
						<p style="color:#b2b2b2;font-size:12px">为了您的资金安全，请见面交易，切勿提前支付任何费用</p>
					</div>
					<div class="toJuBao">
						<img src="../assets/images/jubao.png" />
						<span style="color:#FF6142; font-size:12px">举报</span>
					</div>
				</div>
				<div style="height:10px; background:#f2f2f2; margin-top:5px"></div>
				<div class="liuyan">
					<div class="left">
						<div class="redbian"></div>
						<p style="color:#999; font-size:14px; margin-left:14px">留言</p>
					</div>

					<div class="toLiuyan">
						<span style="color:#ff9913;font-size:14px">我要留言</span>
					</div>
				</div>
				<div style="background-color:#f2f2f2; height:1px"></div>
				<div class="noliuyan">
					<p>目前没有留言</p>
				</div>
			</div>
		</div>
		<!-- 底部固定信息 -->
		<div class="footer">
			<div class="left">
				<div class="menu">
					<img class="ico" src="../assets/images/shouye.png" />
					<p>首页</p>
				</div>
				<div class="menu">
					<!-- <img class="ico" src="../assets/images/fabu.png" /> -->
					<p>发布</p>
				</div>
				<div class="menu">
					<!-- <img class="ico" src="../assets/images/wode.png" /> -->
					<p>我的</p>
				</div>
			</div>
			<div class="right">
				<span class="zixun">在线咨询</span>
				<span class="tel">拨打电话</span>
			</div>
		</div>
		<!-- 侧边栏 -->
		<div class="slide">
			<span class="view-float" style="background-color: #2990f7">复制</span>
			<span class="view-float" style="background-color: #ff9800">海报</span>
			<span class="view-float" style="background-color: #ed414a">电话</span>
			<span class="view-float" style="background-color: #6785e5">发布</span>
			<span class="view-float" style="background-color: #52cb6a">留言</span>
		</div>
	</div>
</template>
<script>
import { getDateDiff, getType } from '@/utils/common'
export default {
	data () {
		return {
			item: {}
		}
	},
	created () {
		this.item = this.$route.params.item;
		console.log(this.item)
	},
	methods: {
		back () { 
      this.$router.go(-1)
    },
		getTime (time) {
			var result = getDateDiff(time)
			return result;
		},
		getTypes (num) {
			var type = getType(num)
			return type;
		}
	}
};
</script>
<style scoped>
/* 标题 */
.title {
	background-color: #ed414a;
	height: 44px;
	color: white;
	font-size: 18px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px 0 5px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}
.title .back {
	display: flex;
	flex-direction: row;
	align-items: center;
}
/* 内容 */
.content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 50px;
	overflow: auto;
	z-index: 1;
}
.content .top {
	display: flex;
	flex-direction: row;
	margin-top: 59px;
	justify-content: space-between;
	align-items: center;
}
.top .left {
	display: flex;
	flex-direction: row;
	margin-left: 15px;
}
.left .name {
	font-size: 14px;
	color: #4395f5;
}
.left .tag {
	padding: 0 3px;
	height: 19px;
	line-height: 19px;
	background-color: #ff8e14;
	color: white;
	font-size: 12px;
	margin-top: 3px;
	border-radius: 3px;
	margin-right: 5px;
}
.left .topping {
	background-color: #1ddc9b;
}
.top .right {
	box-shadow: 0px 0px 5px #ddd;
	border-radius: 2px;
	margin-right: 15px;
	width: 122px;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.right .ewm {
	width: 50px;
	height: 50px;
	margin-right: 3px;
	padding: 1px;
}
.right .t {
	color: #999;
	font-size: 12px;
}
.line {
	width: calc(100% - 20px);
	background-color: #f2f2ff;
	height: 1px;
	margin: 8px 10px 0 10px;
}
.txt {
	margin: 10px;
	color: #666;
	font-size: 15px;
	text-align: justify;
	line-height: 22px;
}
.pic > li > img {
	/* max-width: calc(100% - 6px); */
	box-sizing: border-box;
	max-width: 100%;
	border: 1px solid #eee;
	padding: 2px;
}
/* 底部固定信息 */
.footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 50px;
	background-color: #fff;
	z-index: 1;
	width: 100%;
}
.footer .left {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 42%;
	margin-top: 5px;
}
.footer .left .menu > p {
	font-size: 12px;
	color: #888;
	margin-top: -5px;
}
.footer .right {
	width: 58%;
	font-size: 15px;
	display: flex;
	flex-direction: row;
}
.footer .right .zixun {
	width: 40%;
	background-color: #52cb6a;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.footer .right .tel {
	width: 60%;
	background-color: #ee414a;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
/* 侧边栏 */
.slide {
	position: absolute;
	z-index: 999;
	right: 20px;
	bottom: 100px;
	display: flex;
	flex-direction: column;
	color: white;
}
.view-float {
	width: 40px;
	height: 40px;
	border-radius: 50px;
	font-size: 12px;
	text-align: center;
	line-height: 40px;
	margin-bottom: 10px;
}
/* 浏览，点赞，扩散 */
.ldk {
	display: flex;
	flex-direction: row;
	height: 38px;
	line-height: 38px;
	font-size: 14px;
	color: #666;
}
.ldk .item {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: 10px;
}
.ldk .item .yanse {
	margin-left: 5px;
}
.zanList {
	margin-left: 20px;
	overflow: hidden;
}
.zanList li {
	float: left;
}
.zanHeader {
	border-radius: 50%;
	height: 30px;
	width: 30px;
	margin-left: 5px;
}
.telInfo {
	display: flex;
	flex-direction: row;
	color: #888;
	font-size: 15px;
	justify-content: space-between;
	align-items: center;
	padding: 5px 10px;
}
.telInfo .right {
	width: 95px;
	height: 30px;
	background: #ed414a;
	border-radius: 3px;
}
.telInfo .right .tel > img {
	width: 22px;
	position: relative;
	top: 4px;
	margin-left: 3px;
	margin-right: 3px;
}
.gsd {
	color: #888;
	font-size: 15px;
	height: 40px;
	line-height: 40px;
	margin-left: 10px;
}
.guanggao {
	margin-top: 10px;
	padding-bottom: 10px;
}
.guanggao .pic {
	margin-left: 10px;
	margin-right: 10px;
	width: calc(100% - 20px);
}
.jubao {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	margin-right: 10px;
}
.jubao .toJuBao {
	display: flex;
	flex-direction: column;
}
.liuyan {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 10px 10px 10px 0;
}
.liuyan .redbian {
	background-color: #f65d65;
	width: 10px;
	height: 20px;
}
.liuyan .left {
	display: flex;
	flex-direction: row;
}
.liuyan .toLiuyan {
	overflow: hidden;
}
.noliuyan {
	margin: 10px;
	text-align: center;
	color: #666;
}
</style>
